<template>
  <k-view class="content-view">
    <k-view class="content-block" v-if="stockCodes">
      <statistics
        :chartData="distributionData"
        :statisticsData="statisticsData"
        :statistcsType="2"
        :evaluateInfo="evaluateInfo"
        :isEmpty="statisticsDataEmpty"
        :isLoading="statisticsDataLoading"
        @reload="getMarketStatisticsInfo"
      ></statistics>
    </k-view>
    <k-view class="content-block" v-if="stockCodes">
      <distribution
        :chartData="distributionData"
        :detailData="distributionDetailData"
        :currentItem="{ code: '', label: '自选股', value: '' }"
        :statistcsType="2"
        :isEmpty="distributionDataEmpty"
        :isLoading="distributionDataLoading"
        @reload="getMarketDistributionInfo"
      ></distribution>
    </k-view>
    <k-view class="content-block" v-if="stockCodes">
      <rank-list :activeTab="2" :stockCodes="stockCodes" :themeType="theme"></rank-list>
    </k-view>
  </k-view>
</template>

<script>
import Distribution from '@/components/Home/distribution.vue';
import Statistics from '@/components/Home/statistics.vue';
import {
  getMarketDistribution,
  getMarketDistributionDetail,
  getMarketStatistics,
  getUserEvaluate,
} from '@/apis';

import Apis from '@king-fisher/apis';
import RankList from '@/components/Home/rankList.vue';
import { getNativeSelfCodeList } from '@/utils/selfCode';

const defaultSingleSysSore = {
  company_num: 0,
  high_score_num: 0,
  higher_avg_num: 0,
  higher_avg_rate: 0,
  highest_score: 0,
  market_company_num: 0,
  market_score_avg: 0,
  minimum_score: 0,
  report_date: '20220930',
  score_avg: 0,
  score_inc: 0,
  score_inc_rate: 0,
};

export default {
  props: {
    theme: {
      type: String,
      default: '',
    },
  },
  components: {
    Distribution,
    Statistics,
    RankList,
  },
  data() {
    return {
      statisticsDataEmpty: false,
      statisticsDataLoading: false,
      distributionDataEmpty: false,
      distributionDataLoading: false,
      distributionData: [],
      statisticsData: defaultSingleSysSore,
      evaluateInfo: {
        score: 0,
        market_score_avg: 0,
        score_rate: 0,
      },
      distributionDetailData: {
        score_top_three: [],
        score_inc_highest: {},
        rank_inc_highest: {},
      },
      selfCodeList: [],
      stockCodes: '',
    };
  },
  methods: {
    async getMarketDistributionDetailInfo() {
      const res = await getMarketDistributionDetail({
        block_type: 'stock',
        stock_codes: this.stockCodes,
      });
      if (res.status_code !== 0 && !res.data) {
        return;
      }
      this.distributionDetailData = res.data;
    },
    async getMarketDistributionInfo() {
      this.distributionDataLoading = true;
      const res = await getMarketDistribution({
        block_type: 'stock',
        stock_codes: this.stockCodes,
      });
      this.distributionDataLoading = false;
      if (res.status_code !== 0 || !res.data) {
        this.distributionDataEmpty = true;
        return;
      }
      this.distributionData = this.createDistributionChartData(res.data.list);
    },
    createDistributionChartData(info) {
      const chartData = [];
      if (info && info.length > 0) {
        info.forEach(item => {
          chartData.push({
            value: Number(item.num) ? item.num : 0,
            label: `${item.lower}-${item.upper}`,
          });
        });
      }
      return chartData;
    },
    async getMarketStatisticsInfo() {
      this.statisticsDataLoading = true;
      const res = await getMarketStatistics({
        block_type: 'stock',
        stock_codes: this.stockCodes,
      });
      this.statisticsDataLoading = false;
      if (res.status_code !== 0 || !res.data) {
        this.statisticsDataEmpty = true;
        return;
      }
      this.statisticsData = res.data;
    },
    async getUserEvaluateInfo() {
      const res = await getUserEvaluate(this.stockCodes);
      if (res.status_code !== 0) {
        Apis.Toast.show('暂未查询到相关信息');
        return;
      }
      this.evaluateInfo = res.data;
    },
    getSelfCodeList() {
      getNativeSelfCodeList().then(res => {
        if (res && res.selfCodeList) {
          this.selfCodeList = res.selfCodeList;
          const codeList = res.selfCodeList.map(item => {
            return item.stockcode;
          });
          this.stockCodes = codeList.join(',');
          this.getPageData();
        }
      });
    },
    getPageData() {
      this.getMarketStatisticsInfo();
      this.getMarketDistributionDetailInfo();
      this.getUserEvaluateInfo();
      this.getMarketDistributionInfo();
    },
  },

  mounted() {
    this.getSelfCodeList();
  },
};
</script>

<style lang="less">
.content-view {
  .content-block {
    width: calc(100vw - 24px);
    margin: 16px auto;
  }
}
</style>
